<template>
    <div>
        <div id="login-title">分类</div>
        <div id="classify">
            <div class="page-body-left">
            <div id="left">
                <div ref="onename" class="one-name" v-for="(c,i) in chooseThen.data" :key="i" @click="chooseOneClick($event,c.classifyOneName)">{{c.classifyOneName}}</div>
            </div>
        </div>

        <div class="page-body-right">
            <div id="right">
                <div class="right-fix">
                    <div class="tow-name" v-for="(y,i) in chooseClassify" :key="i"><router-link :to="'/searchList/'+clickClassifyOneName+'/'+y">{{y}}</router-link></div>
                </div>
            </div>
        </div>
        </div>
        
        <Navbar></Navbar>
    </div>
    
</template>

<script>
import Navbar from "../components/Navbar.vue"
import {mapState} from "vuex";
export default {
    components: {
        Navbar,
    },
    computed: {
        ...mapState([
            "chooseThen",
            "chooseClassify",
            "clickClassifyOneName",
        ]),
    },
    
    mounted:function () {
        this.$store.dispatch("requestChoose");  
    },
    methods: {
      chooseOneClick:function(e,v){
          for(var i=0;i<this.chooseThen.data.length;i++){
            if(v==this.chooseThen.data[i].classifyOneName){
                this.$refs.onename.forEach(function(e){
                    e.style.backgroundColor = "#63B8FF";
                })
                e.target.style.backgroundColor = "orange";
            this.$store.commit("setChooseClassify",[this.chooseThen.data[i].classifyTwoName,v]);  
               }
          }
      },
      
    },
   
}
</script>

<style scoped>
  .page-body-left{
    width: 20%;
    overflow-y: scroll;
    height: calc(100vh - 95px);
  }
  .page-body-right{
      width: 80%;
    overflow-y: scroll;
    height: calc(100vh - 95px);
  }
  #left{
    width: 100%;
    height: 1500px;
    background-color: #63B8FF;
    text-align: center;
    line-height: 40px;
  }
#right{
    width: 100%;
    background-color: #eeeeee;
    height: 1500px;
}
#classify{
    display: flex;
}
#login-title{
    text-align: center;
    font-size: 15px;
    height: 45px;
    line-height: 45px;
    background-color: #63B8FF;
    border-bottom: solid 1px gray;
    font-family: 宋体;
    font-weight: 700;
}
.one-name{
    width: 100%;
    height: 40px;
    font-size: 5vw;

}
.tow-name{
    width: 33.33%;
}
.right-fix{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.one-name:nth-of-type(1){
    background-color: orange;
}
a{
    color: #8A2BE2;
    text-decoration: none;
}
</style>